<template>
	<view>
		<block v-if="content">
			
		
		<up-swiper
				:list="content.storeInfo.slider_image"
				height="750rpx"
				@change="e => currentNum = e.current"
				:autoplay="false"
				radius="0"
				indicatorStyle="right: 24rpx"
		>
			<template #indicator>
				<view
					class="indicator-num"
				>
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ content.storeInfo.slider_image.length }}</text>
				</view>
			</template>
		</up-swiper>
		<view class="info-box">
			<view class="money">
				<view class="left">
					{{content.storeInfo.price}} <view class="em">元</view>
				</view>
				<view class="sales">
					已售{{content.storeInfo.sales}}
				</view>
			</view>
			<view class="title">
				{{content.storeInfo.store_name}}
			</view>
			<view class="tag">
				<view class="span gwtj">
					官方推荐
				</view>
				<view class="span dtgm">
					<view class="em">谜</view>
					答题购买
				</view>
			</view>
			<!-- <view class="vip-box">
				<view class="left">
					<image src="/static/icon-vip2.png" mode="heightFix"></image>
					<view class="h1">开通观澜会员，即可购买此商品</view>
				</view>
				<view class="btn">
					立即开通
				</view>
			</view> -->
		</view>
		<view class="attr-box" v-if="content.productAttr.length>0">
			<view class="item" @click="onSubmit">
				<view class="msg">
					规格
				</view>
				<view class="val">
					<view class="left">
						 已选 {{attrValue}}
					</view>
					<up-icon name="arrow-right" color="#9A9A9A" size="32rpx"></up-icon>
				</view>
			</view>
			<!-- <view class="item">
				<view class="msg">
					服务
				</view>
				<view class="val">
					7天保价 · 极速退款 · 不支持7天无理由退货 <up-icon name="arrow-right" color="#9A9A9A" size="32rpx"></up-icon>
				</view>
			</view> -->
		</view>
		<view class="details-box">
			<up-tabs
			class="tab"
			:activeStyle="{
				color: '#000',
				fontWeight: 'bold',
			}"
			:inactiveStyle="{
			    color: '#696D7F'
			}"
			lineColor="#FF6200"
			:scrollable='false'
			:list="list1" @change="onChange"></up-tabs>
			<view class="text" v-html='content.storeInfo.description'>
				
			</view>
		</view>
		<view class="bottom-box-bg">
		</view>
		<view class="bottom-box">
			<view class="left">
				<button open-type="contact" class="it">
					<image :src="`${$imgurl}/static/icon-kf.png`" mode=""></image>
					<view class="span">客服</view>
				</button>
				<!-- <view class="it">
					<image src="/static/icon-sc.png" mode=""></image>
					<view class="span">收藏</view>
				</view> -->
			</view>
			<view class="btn" @click="onSubmit">
				立即购买
			</view>
		</view>
		</block>
		<my-good-spec
			ref="specRef"
			v-if="content"
			:content="content"
			:productAttr="content.productAttr"
			:productValue="content.productValue"
			@change="onChangeSpec"
		></my-good-spec>
	</view>
</template>

<script setup>
	import { ref,computed} from 'vue'; 
	import {onLoad} from "@dcloudio/uni-app"
	import {getProductDetail,cartAdd} from "@/api/products.js"
	const currentNum=ref(0)
	// 使用 reactive 创建响应式数组  
	const type=ref(0)
	const specRef=ref(null)
	const list1=ref([
		{name:'商品详情'}
	])
	const content=ref('')
	const num =ref(1)
	const attrValue=ref('')
	const onChange=(e)=>{
		type.value=e.index
	}
	onLoad(async (obj)=>{
		let res= await getProductDetail(obj.id)
		content.value=res.data
	})
	const onChangeSpec=(e)=>{
		attrValue.value=e.attrValue
		num.value=e.num
	}
	const onSubmit= ()=>{
		if(!specRef.value._show){
			specRef.value.show();
			return false;
		}
		uni.showActionSheet({
			itemList: ['送自己', '送别人'],
			success:  async (re)=>{
				const post={
					"productId":content.value.storeInfo.id, 
					"cartNum": num.value, 
					"is_new": 1 
				}
				if(attrValue.value){
					post.uniqueId=content.value.productValue[attrValue.value].unique
				}
				let res= await cartAdd(post)
				specRef.value.hide();
				uni.navigateTo({
					url:`./confirmOrder?type=${re.tapIndex+1}&new=1&cartId=${res.data.cartId}`
				})
			}
		});
		
	}
	
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.indicator-num{
		background-color: rgba(0, 0, 0, 0.35);
		text-align: center;
		border-radius: 80rpx;
		color:#fff;
		font-size: 24rpx;
		padding:0 20rpx;line-height: 40rpx;
		margin-bottom:30rpx;
	}
	.info-box{
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		margin-top: -30rpx;
		position: relative;
		z-index: 9;
		padding:28rpx;
		.money{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				color:#F5493D;font-weight: bold;
				align-items: flex-end;
				font-size:36rpx;
				line-height: 1;
				.em{
					font-size: 24rpx;
				}
				.e{
					font-size: 24rpx;
				}
			}
			.sales{font-size: 24rpx;color:#969799;}
			
		}
		.title{
			font-size: 32rpx;
			line-height: 40rpx;
			font-weight: bold;
			margin-top: 22rpx;
			
		}
		.tag{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top:20rpx;
			gap: 8rpx;
			.gwtj{
				background-color: #FFF1F0;
				color:#EA3949;font-size: 20rpx;
				line-height: 36rpx;
				padding:0 8rpx;
			}
			.dtgm{
				border:1rpx solid #FF8E67;
				box-sizing: border-box;
				border-radius: 6rpx;
				display: flex;
				font-size: 20rpx;
				padding:0 8rpx;
				line-height: 34rpx;
				color:#F5493D;
				.em{
					padding-right:8rpx;border-right:1rpx dashed #F4B192;
					margin-right:8rpx;
				}
			}
		}
		.vip-box{
			display: flex;
			height:80rpx;
			padding:0 20rpx;
			margin-top:36rpx;
			justify-content: space-between;
			align-items: center;
			border-radius: 8rpx;
			background: linear-gradient( 128deg, #495168 0%, #1A1D2D 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.left{
				display: flex;align-items: center;
				.h1{
					color: #FFE2B2;font-size: 28rpx;
				}
				
				image{
					height:32rpx;width:32rpx; margin-right:12rpx;
				}
			}
			.btn{
				border-radius: 80rpx;
				background: linear-gradient(90deg, #FEE9CB 0%, #FCD293 100%);
				font-size: 24rpx;
				font-weight: bold;
				color:#9F2115;
				line-height: 48rpx;
				width:136rpx;
				text-align: center;
			}
		}
	}
	.attr-box{
		position: relative;
		z-index: 2;
		border-top:16rpx solid #F7F8FA;
		border-bottom: 16rpx solid #F7F8FA;
		padding:16rpx 32rpx;
		.item{
			display: flex;align-items: center;
			padding:24rpx 0;
			.msg{
				margin-right:48rpx;font-size: 28rpx;color:#696D7F;
			}
			.val{
				flex:1;
				display: flex;
				align-items: center;
				color:#696D7F;font-size: 28rpx;
				justify-content: space-between;
				.left{
					flex:1;
					display: flex;
					align-items: center;
					.images{
						display: flex;
						margin-right:20rpx;
						gap: 12rpx;
						image{
							width:64rpx;height:64rpx;
						}
					}
				}
			}
		}
	}
	.details-box{
		position: relative;
		z-index: 2;
		padding:0 24rpx;
		.text{
			padding:32rpx 0;
			image{width:100%;}
		}
	}
	.alert-box{
		padding: 0 30rpx;
		.num-box{
			.msg{
				color:#aaa;
			}
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.attr-box2{
			margin-top:30rpx;
			.item{
				font-size: 28rpx;
				margin-bottom: 30rpx;
				.msg{
					color:#aaa;
				}
				.val{
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					margin-top:20rpx;
					.it{
						border-radius: 80rpx;
						line-height: 48rpx;
						padding:0 20rpx;
						background-color: #eee;
						color:#000;
						&.on{
							background-color: #F5493D;
							color: #fff;
						}
					}
				}
				
			}
		}
	}
	.bottom-box{
		z-index: 99999;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width:100%;
		display: flex;
		padding:10rpx 28rpx;
		border-top:1rpx solid #E6E6E6;
		gap: 40rpx;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom) );
		.left{
			display: flex;line-height: 1;
			gap: 40rpx;
			.it{
				background-color:initial;line-height: initial;
				padding:0;margin:0;
				&:after,&:before{
					display: none;
				}
				image{
					width:48rpx;height:48rpx;
					display: block;
					margin:0 auto;
				}
				.span{
					font-size: 22rpx;margin-top:4rpx;
					color:#9DA0A6;
				}
			}
		}
		.btn{
			flex:1;
			line-height: 88rpx;
			font-size: 32rpx;
			color:#fff;
			background: #FF6200;
			border-radius: 80rpx;
			width:240rpx;
			text-align: center;
		}
	}
	.bottom-box-bg{
		padding:10rpx 0;
		height:88rpx;
		margin-top:30rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom) );
	}
	
	
</style>
